<!-- author: xuett -->
<!-- date: 2023-04-23 14:45:29 -->
<!-- description: 表格列 -->
<template>
    <el-table-column v-if="!col.children" :prop="col.prop" :label="col.label" :align="col.align ? col.align : 'center'"
        :fixed="col.fixed ? col.fixed : false" :width="col.width ? col.width : ''"
        :min-width="col.minWidth ? col.minWidth : ''"
        :show-overflow-tooltip="col.type == 'html' ? false : { 'raw-content': true }" header-align="center">
        <!-- 自定义表头 -->
        <template v-if="col.isHeaderSlot" #header="{ column, $index }">
            <slot :name="`${col.prop}-header`" :column="column" :index="$index"></slot>

        </template>
        <!-- 自定义 -->
        <template v-if="customColumn" #default="scope">
            <slot name="customColumn" :row="scope.row" :index="scope.$index" :column="scope.column"></slot>
        </template>
        <!-- 列-状态  -->
        <template v-else-if="col.type == 'switch'" #default="{ row }">
            <div v-if="checkPermi([`${statePower}:edit`])">
                <el-switch v-model="row[col.prop]" inline-prompt :active-text="col.text ? col.text[0] : '启用'"
                    :inactive-text="col.text ? col.text[1] : '禁用'" :width="60"
                    :active-value="col.swith.activeValue != undefined ? col.swith.activeValue : '0'"
                    :inactive-value="col.swith.inactiveValue != undefined ? col.swith.inactiveValue : '1'"
                    @change="tableOperate(row, 'switch', col.prop)" />
            </div>
            <div v-else>
                <el-tag :type="row[col.prop] == 0 ? 'primary' : 'danger'">{{ row[col.prop] == 0 ? "启用" : "禁用"
                    }}</el-tag>
            </div>
        </template>
     

        <template v-else-if="col.type == 'slot'" #default="scope">
            <slot :name="col.prop" :row="scope.row" :index="scope.$index"></slot>
        </template>
           <!-- 列-图片 -->
           <template v-else-if="col.type == 'image'" #default="{ row }">
           
            <image-preview v-if="row[col.prop]||col.ddefaultImg"  preview-teleported  :src="row[col.prop]||col.ddefaultImg" :width="50" :height="50" />
            <span v-else style="font-size: 12px; font-style: italic">无图片</span>
        </template>
        <!-- 列-字典 -->
        <template v-else-if="col.dict" #default="{ row }">
            <G-dict-tag :options="$dict[col.dict]" :value="row[col.prop]" tag="true" />
        </template>

        <!-- 单位 -->
        <template v-else-if="col.unit" #default="{ row }">
            <span>{{ row[col.prop] }}{{ row[col.prop] != null ? col.unit : "" }}</span>
        </template>
           <!-- html 插槽 -->
           <template v-else-if="col.type == 'html'" #default="scope">
            <slot :name="col.prop" :row="scope.row" :index="scope.$index"></slot>
        </template>
        <!-- 控制内容长度，多行省略 -->
        <template v-else #default="{ row }">
            <span>{{ row[col.prop] }}</span>
        </template>
    </el-table-column>

    <el-table-column v-else :label="col.label" :align="col.align ? col.align : 'center'"
        :fixed="col.fixed ? col.fixed : false" show-overflow-tooltip :width="col.width ? col.width : ''">
        <tableColumnItem v-for="(t, tIndex) in col.children" :key="tIndex" :col="t" :custom-column="customColumn"
            @call-back-data="tableOperate">
            <template v-for="(slot, i) in Object.keys(customSlots)" :key="i" #[slot]="scope">
                <!-- 以之前的名字命名插槽，同时把数据原样绑定 -->
                <slot :name="slot" v-bind="scope" />
            </template>
        </tableColumnItem>
    </el-table-column>
</template>

<script setup>
import tableColumnItem from "./table-column-item.vue";
import { checkPermi } from "@/utils/permission"; // 权限判断函数
const { proxy } = getCurrentInstance();

const $props = defineProps({
    customColumn: {
        type: Boolean,
        default: false
    },
    col: {
        type: Object,
        default: () => {
            return {};
        }
    },
    statePower: {
        type: String,
        default: ""
    }
});
const $emit = defineEmits(["callBackData"]);

const customSlots = reactive({
    ...proxy.$slots
});

//初始化-字典数据
const $dict = ref([]);
//监听表头变化，重新加载字典
watch(
    () => $props.col,
    (newVal) => handleDict(newVal)
);

onMounted(() => {
    handleDict($props.col);
});

// 处理html 格式换行
// function toBreak(val) {
//   if (val) return val.split("\n").join("<br/>");
// }

//处理字典
const handleDict = (val) => {
    if (val.dict) {
        // $dict.value = getDict([val.dict]);
        $dict.value = proxy.useDict([val.dict]);
    }
};

//table-操作
const tableOperate = (val, i) => {
    console.log(val, i, "--");
    $emit("callBackData", val, i);
};
</script>

<style scoped lang="scss">
.text-box {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    /* 这里是超出几行省略 */
}

.custom-tooltip {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    /* 这里是超出几行省略 */
}
</style>
